<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ListCard from './ListCard.vue'
import type { CardT } from '@/api/sys'

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

const productList = ref<CardT[]>([])

onMounted(() => {
  productList.value = [
    {
      id: '1',
      enabled: true,
      svg: 'CloudApp',
      label: '可用',
      name: 'vap主机配置',
      description: 'vap应用主机配置工具，包含：磁盘隐藏、显示、挂盘，rdp会话设置等常用功能',
      uri: '/vap',
    },
    {
      id: '2',
      enabled: true,
      svg: 'DevTool',
      label: '开发中',
      name: '开发工具',
      description:
        '开发中经常需要用的一些小工具，例如：json格式化、unix时间戳转换、base64图片预览等等',
      uri: '/devTool',
    },
    {
      id: '3',
      enabled: false,
      svg: 'cidian',
      label: '未开始',
      name: '开发词典',
      description:
        '收集开发中常用的单词、术语等等，方便关联记忆',
      uri: '/vap',
    },
    {
      id: '4',
      enabled: true,
      svg: 'rtc',
      label: '开发中',
      name: '远程会议控制',
      description:
        '基于webRtc开发的远程会议、屏幕共享、远程协助 功能',
      uri: '/rtc',
    },
    {
      id: '5',
      enabled: true,
      svg: 'fileTar',
      label: '开发中',
      name: '文件归档器',
      description:
        '将文件归档存储，对于视频文件会采用av1编码，减少体积。它也是 nas 的前置客户端',
      uri: '/archive/home',
    },
    {
      id: '6',
      enabled: true,
      svg: 'textEncr',
      label: '开发中',
      name: '密信',
      description:
        '对文本信息进行加密存储，关联Android密信模块',
      uri: '/secret/home',
    },
    {
      id: '7',
      enabled: true,
      svg: 'textEncr',
      label: '开发中',
      name: 'IDP',
      description:
        'IDP的基础信息采集，模块处于验证阶段，优先适配麒麟。',
      uri: '/idp/home',
    },
  ]
})
</script>

<template>
  <div>
    <div :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
      <el-row :gutter="16">
        <el-col
          v-for="(product, index) in productList"
          :key="index"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
        >
          <ListCard :product="product" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
